import React, { Component } from "react";

// props是用来做父传子（子组件去接受父组件的自定义属性）
// 当一个组件被多次调用的时候，组件里面的一部分内容不一样的时候，那么就需要父传子
// props的值只能接受，不能修改
/*
  纯函数
    1. 同步函数
    2. 入参相同的话,出参就相同
    3. 入参不能被修改
*/

// 函数组件通过props参数来进行接收
const Header = ({ name, age }) => {
  // const { name, age } = props;
  return (
    <div>
      这是头部组件 - {name} - {age}
    </div>
  );
};

// 类组件可以通过this.props来进行接收
class Footer extends Component {
  // 在类组件里面不知道怎么办的时候，打印this
  // 类组件的render其实是一个生命周期，会自动执行的
  render() {
    // console.log(this);
    const { sex } = this.props;
    return <div>这是底部组件 - {sex}</div>;
  }

  // 相当于vue的mounted
  // componentDidMount() {
  //   setTimeout(() => {
  //     this.props.sex = 2;
  //   }, 3000);
  // }
}

class App extends Component {
  state = {};
  render() {
    return (
      <>
        <h2>props</h2>
        <Header name="zhangsan" age="20" />
        <Footer sex="1" />
      </>
    );
  }
}

export default App;
